﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}

<link rel="stylesheet" href="__STATIC__/vendors/css/bootstrap-select/bootstrap-select.min.css">
{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/validation/validation.min.js"></script>
<script src="__STATIC__/vendors/js/jquery.form/jquery.form.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-select/bootstrap-select.min.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
        $("#ajaxForm").ajaxForm({
            //定义返回JSON数据，还包括xml和script格式
            dataType: 'json',
			//在发送之前进行的操作，如果有问题，返回false即可不会进行提交
            beforeSend: function () {
            	//定义 form为当前表格
                const form = $("#ajaxForm")

				//如果没有完成校验就返回false不提交
				if (form[0].checkValidity() === false){
					return false;
				}
            },
            success: function (data) {
                //提交成功后调用
                new Noty({
		            type: "success",
		            layout: "topRight",
		            text: "成功修改一条数据，ID为" + data,
		            progressBar: true,
		            timeout: 2500,
		            animation: {
		                open: "animated bounceInRight",
		                close: "animated bounceOutRight"
		            },
		            callbacks: {
		            	afterShow: function() {
		            		$(location).attr('href', '{:url('Group/index')}');
		            	},
		            }
		        }).show();
                return false;
            },
            error: function(XmlHttpRequest, textStatus, errorThrown){  
                //提交成功后调用
                new Noty({
		            type: "error",
		            layout: "topRight",
		            text: "数据修改失败",
		            progressBar: true,
		            timeout: 2500,
		            animation: {
		                open: "animated bounceInRight",
		                close: "animated bounceOutRight"
		            }
		        }).show();
		        return false;
            }
        });

        //如果nav_class_select值改变，就将值赋给nav_class
        $("#nav_class_select").change(function(){
            $("#nav_class").val($("#nav_class_select").val())
    	});

        //如果nav_class_select值改变，就将值赋给nav_class
    	$("#nav_detail_select").change(function(){
            $("#nav_detail").val($("#nav_detail_select").val())
    	});

    	//获取此前的数据
        query();
	});

	//获取此前数据,初始赋值
    function query(){
        //获取此前客户信息
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "{:url('Group/edit',['type' =>'data','id' => ''])}"+{$data.id},
            //请求成功
            success : function(result) {
                if(result == 0){
                    new Noty({
                        type: "success",
                        layout: "topRight",
                        text: "id错误，没有查到这个用户组的信息",
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        }
                    }).show();
                }else{
                    // var data = $.parseJSON(result);
                    //将上次数据赋值
                    $("#name").val(result.name);
                    //设置多选
                    $("#nav_class_select").selectpicker('val',result.nav_class);
			    	$("#nav_class_select").selectpicker('refresh');
			    	$("#nav_detail_select").selectpicker('val',result.nav_detail);
			    	$("#nav_detail_select").selectpicker('refresh');

                    $('#order').val(result.order);

                    console.log(result);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }
 
</script>
{/block}

//页面显示名称
{block name="PageName"}
修改用户组
{/block}

//主页面代码
{block name="main"}
<div class="row">
    <div class="col-xl-12">
        <div class="widget has-shadow">
        	<div class="widget-header bordered no-actions d-flex align-items-center">
                <h2>修改用户组 <small>更改客户用户组权限后需要重新登陆才生效</small></h2>
            </div>
            <div class="widget-body">
                <form class="needs-validation" novalidate="" id="ajaxForm" action="{:url('Group/update',['id'=>$data.id])}">
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">名称 *</label>
	                    <div class="col-xl-9">
	                        <input type="text" class="form-control" placeholder="请输入用户组的名称" required name="name" id="name">
	                        <div class="invalid-feedback">
	                            请输入用户组的名称
	                        </div>
	                    </div>
	                </div>
	                <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">显示大类 *</label>
	                    <div class="col-xl-9">
                            <select class="form-control selectpicker show-menu-arrow" multiple data-actions-box="true" id="nav_class_select" required="required">
                                {volist name="class" id="class"}
                                	<option value="{$class.id}" {if $class.id == 1}selected{/if}><i class="{$class.icon}"></i>{$class.name}</option>
                                {/volist}
                            </select>
                            <input type="text" name="nav_class" id="nav_class" hidden="hidden" value="{$data.nav_class}">
                        </div>
                    </div>
                    <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">显示细类 *</label>
	                    <div class="col-xl-9">
                            <select class="form-control selectpicker show-menu-arrow" multiple data-actions-box="true" id="nav_detail_select" required="required">
                            	{volist name="class_detail" id="class_detail"}
                            		<optgroup label="{$class_detail.name}">
		                                {volist name="class_detail.detail" id="detail"}
		                                	<option value="{$detail.id}">{$detail.display_name}</option>
		                                {/volist}
	                                </optgroup>
                                {/volist}
                            </select>
                             <input type="text" name="nav_detail" id="nav_detail" hidden="hidden" value="{$data.nav_detail}">
                        </div>
                    </div>
                    <div class="form-group row d-flex align-items-center mb-5">
	                    <label class="col-xl-3 form-control-label d-flex justify-content-lg-end">排序 *</label>
	                    <div class="col-xl-9">
                            <select class="form-control" id="order" name="order" required="required">
                                <option value=""></option>
                                {volist name="order" id="order"}
								    <option value="{$order.id|raw}">{$order.id|raw} - {$order.name|raw}</option>
								{/volist}
                            </select>
                        </div>
                    </div>
	                <div class="text-right">
		                <button class="btn btn-shadow" type="reset" onclick="history.go(-1);">取消</button>
		                <button class="btn btn-gradient-01" type="submit">提交</button>
		            </div>
		        </form>
            </div>
        </div>
        <!-- End Export -->
    </div>
</div>
{/block}//主页面
